 
    const id = location.search.split("=")[1];

    ajax("http://localhost:3000/api",res=>{
        res = JSON.parse(res).msg;
        let i = 0;
        res.some((val,idx)=>{
            i = idx;
            return val.proId === id
        })
        // 渲染小图
        $(".smlbox>img").src = res[i].img;
        // 渲染大图
        $(".bigimg>img").src = res[i].img;
        // console.log(res[i].img)
        // 渲染图片列表
        let str = "";
        res[i].imgs.forEach(val=>{
            str += `<li><img src="${val}" alt=""></li>`
        })
        $(".magnifier").innerHTML = str;

        // 渲染标题
        $(".name").innerHTML = res[i].proName;
        // 渲染原价
        $(".summary-pic").innerHTML = "￥" + res[i].price;



    },
    {
        type:"getGoods"
    }
    )


    function $(s){
        return document.querySelector(s);
    }


    function ajax(url, callback, data){
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`
        }
        url += "?" + str;
        const xhr = new XMLHttpRequest();
        xhr.open("get",url)
        xhr.onload = function(){
            if(xhr.status === 200){
                callback(xhr.responseText)
            }
        }
        xhr.send();
    }









 
 
 const imgs = [{
        s:"./img/imgs/s1.jpg",
        m:"./img/imgs/m1.jpg",
        l:"./img/imgs/L1.jpg",
        },{
        s:"./img/imgs/s2.jpg",
        m:"./img/imgs/m2.jpg",
        l:"./img/imgs/L2.jpg",
        },{
        },{
        s:"./img/imgs/s3.jpg",
        m:"./img/imgs/m3.jpg",
        l:"./img/imgs/L3.jpg",
        },{
        s:"./img/imgs/s4.jpg",
        m:"./img/imgs/m4.jpg",
        l:"./img/imgs/L4.jpg",
        }];

// 点击小图切换中图和大图
function Tab(){
    this.li = document.querySelectorAll(".smlimg .magnifier li");
    // console.log(this.li)
    this.sImg = document.querySelector(".smlbox img");
    this.bImg = document.querySelector(".bigimg img");
    this.data = imgs;
    this.index = 0;
    this.addEvent();
    }
    Tab.prototype.addEvent = function(){
    const that = this;
    for(let i=0;i<this.li.length;i++){
        this.li[i].xuhao = i;
        this.li[i].onclick = function(){
            that.hide();
            that.getIndex(this);
        }
    }
    }
    Tab.prototype.hide = function(){
    this.li[this.index].className = "";
    }
    Tab.prototype.getIndex = function(now){
    this.index = now.xuhao;
    this.show();
    }
    Tab.prototype.show = function(){
    this.li[this.index].className = "active";   
    this.sImg.src = this.data[this.index].m;
    this.bImg.src = this.data[this.index].l;
    }
    new Tab();
    
    
    
    
    
     class Magnifier{
        constructor(){
            this.sBox = document.querySelector(".smlbox");
            this.sSpan = document.querySelector(".smlbox span");
            this.bBox = document.querySelector(".bigimg");
            this.bImg = document.querySelector(".bigimg img");
            this.addEvent();
        }
        move(ops){
            let l = ops.x - this.sSpan.offsetWidth/2;
            let t = ops.y - this.sSpan.offsetHeight/2;
            if(l < 0) l = 0;
            if(t < 0) t = 0;
            if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
                l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
            }
            if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
                t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
            }
            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";
            const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
            const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
            this.bImg.style.left = -x * (this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
            this.bImg.style.top = -y * (this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
        }
        init(){
            this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
            this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
        }
        addEvent(){
            const that = this;
            this.sBox.onmouseenter = function(){
                that.show();
            }
            this.sBox.onmouseleave = function(){
                that.hide();
            }
            this.sBox.onmousemove = function(eve){
                const e = eve || window.event;
                const pos = {
                    x:e.offsetX,
                    y:e.offsetY
                };
                that.move(pos);
            }
        }
        show(){
            this.sSpan.style.display = "block";
            this.bBox.style.display = "block";
            this.init();
        }
        hide(){
            this.sSpan.style.display = "none";
            this.bBox.style.display = "none";
        }
        }
        new Magnifier();
    
    
    

        












